<template>
	<view class="home" :style="{
			'padding-top':searchHeight+'px'
		}">
		<view class="search" :style="{
			'padding-top':headerTop+'px'
		}"> 
			<u-search placeholder="请输入您要搜索的内容" clearabled :showAction='false'></u-search>
		</view>
		<view class='adv'>
			<view class="advBgCol" :style="{'height':(advHeight/2)+'px','margin-bottom':(advHeight/2+6)+'px'}"></view>
			<view class="advImg">
				<u-swiper :list="banner" :height='advHeight'></u-swiper>
			</view>
			<view class="kind dFlex jAround_aCenter">
				<view class="kindOne dFlex flexDirection jCenter_aCenter">
					<view class="kindImg imgPublic">
						<image src="../static/images/icon_07.png" mode="widthFix"></image>
					</view>
					<text>品牌街</text>
				</view>
				<view class="kindOne dFlex flexDirection jCenter_aCenter">
					<view class="kindImg imgPublic">
						<image src="../static/images/icon_17.png" mode="widthFix"></image>
					</view>
					<text>优惠券</text>
				</view>
				<view class="kindOne dFlex flexDirection jCenter_aCenter">
					<view class="kindImg imgPublic">
						<image src="../static/images/icon_16.png" mode="widthFix"></image>
					</view>
					<text>我的订单</text>
				</view>
				<view class="kindOne dFlex flexDirection jCenter_aCenter">
					<view class="kindImg imgPublic">
						<image src="../static/images/icon_03.png" mode="widthFix"></image>
					</view>
					<text>全部分类</text>
				</view>
			</view>
		</view>
		<!-- 限时秒杀 -->
		<view class='active'>
			<view class="titles dFlex jBetween_aCenter">
				<view class="tit dFlex jStart_aCenter">
					<view class="titImg imgPublic">
						<image src="../static/images/mszc.png" mode="widthFix"></image>
					</view>
					<view class="titTime dFlex jStart_aStart">
						<view class="count">04点场</view>
						<view class="time">00:00:48</view>
					</view>
				</view>
				<view class="right dFlex jEnd_aCenter">
					<!-- <text>限时抢购</text> -->
					<u-icon name="arrow-right" label="限时抢购" color='#999999' size='14' labelPos='left' labelSize='12' labelColor='#999999'></u-icon>
				</view>
			</view>
			<view class='activeImg'>
				<image src="../static/images/adv.png" mode="widthFix"></image>
			</view>
		</view>
		<view class='tuijian imgPublic'>
			<image src="../static/images/h-rxsp.png" mode="widthFix"></image>
		</view>
		<view class="shops dFlex jBetween_aStart fWap">
			<view class="shopOne" v-for="(item,index) in 5" :key='index'>
				<view class="shopImg imgPublic dFlex jCenter_aCenter">
					<image src="../static/logo.png" mode="widthFix"></image>
				</view>
				<view class="shopInfo">
					<view class="shopName">商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称</view>
					<view class="shopPrice dFlex jBetween_aCenter">
						<view class="price">￥<text>200.00</text></view>
						<view class="sale">已售出18件</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				headerTop:getApp().globalData.headerTop,
				header:getApp().globalData.header,
				searchHeight:'',
				banner:['https://cdn.uviewui.com/uview/swiper/swiper1.png','https://cdn.uviewui.com/uview/swiper/swiper2.png','https://cdn.uviewui.com/uview/swiper/swiper3.png',],
				advHeight:'',
			}
		},
		onLoad() {
			uni.getImageInfo({
				src:this.banner[0],
				success: (info) => {
					let rate = info.width / info.height;
					this.advHeight = (uni.getSystemInfoSync().windowWidth - 24) / rate;
				},
				fail:(err)=>{
					console.log(err);
				}
			})
		},
		onShow(){
			uni.createSelectorQuery().select('.search').boundingClientRect(data => {
				console.log(data)
				this.searchHeight = data.height;
			}).exec()
		},
		methods: {
			
		}
	}
</script>

<style scoped lang="scss">
	.shops{
		width: calc(100% - 24px);
		margin:0 auto;
		.shopOne{
			.shopInfo{
				.shopPrice{
					width:100%;
					margin-top: 12px;
					.sale{
						color:#999999;
						font-size: 12px;
					}
					.price{
						color:#ff3b3b;
						font-size: 12px;
						text{
							font-size: 13px;
						}
					}
				}
				.shopName{
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					font-size: 14px;
					color:#333;
				}
				width:100%;
				background:white;
				padding:12px;
				box-sizing: border-box;
				border-radius: 2px;
			}
			.shopImg{
				width:100%;
				height:169.5px;
				image{
					border-radius: 2px;
				}
			}
			width:calc((100% - 12px) / 2);
			margin-bottom:12px;
		}
	}
	.tuijian{
		margin-bottom: 12px;
	}
	.active{
		.activeImg{
			width:100%;
		}
		.titles{
			.tit{
				flex:1;
				.titTime{
					.time{
						padding:0 5px;
						color:#ff3131;
					}
					.count{
						width: max-content;
						padding:0 3px;
						color: white;
						background: #ff3131;
					}
					width: max-content;
					font-size:11px;
					border: 1px solid #ff3131;
					border-radius: 2px;
				}
				.titImg{
					width:20vw;
					margin-right:12px;
				}
			}
			.right{
				font-size:12px;
				color:#999999;
			}
			width:100%;
			padding:10px;
			box-sizing: border-box;
			border-bottom: 1px solid #f8f8f8;
		}
		width: calc(100% - 24px);
		margin: 12px auto;
		background: white;
		border-radius: 4px;
	}
	.adv{
		.kind{
			width: 100%;
			padding-bottom: 5px;
			.kindOne{
				flex:1;
				text-align: center;
				font-size: 14px;
				color: #999999;
				.kindImg{
					width:40px;
					height:40px;
					margin-bottom: 5px;
				}
			}
		}
		.advImg{ 
			width: 100%;
			padding: 0 12px;
			position: absolute;
			top:0;
			left: 0;
			box-sizing: border-box;
		}
		.advBgCol{
			width: 100%;
			background: #ff3b3b;
		}
		width: 100%;
		position: relative;
		background: white;
	}
	.search{
		width: 100%;
		padding:0 12px 12px;
		box-sizing: border-box;
		background: $mainColor;
		position: fixed;
		top:0;
		left:0;
	}
</style>
